<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>自定义右键菜单</title>
	<style type="text/css">
		body,
		ul,
		li {
			margin: 0;
			padding: 0;
		}

		body {
			font: 12px/24px arial;
		}

		#menu {
			position: absolute;
			top: -9999px;
			left: -9999px;
			width: 100px;
			border-radius: 3px;
			list-style-type: none;
			border: 1px solid #8f8f8f;
			padding: 2px;
			background: #fff;	
			
		}

		#menu li {
			position: relative;
			height: 24px;
			padding-left: 24px;
			background: #eaead7;
			vertical-align: top;
		}

		#menu li a {
			display: block;
			color: #333;
			background: #fff;
			padding-left: 5px;
			text-decoration: none;
		}

		#menu li:hover {
			background: #999;
		}

		#menu li:hover a {
			color: #fff;
			background: #8f8f8f;
		}

		#menu li em {
			position: absolute;
			top: 0;
			left: 0;
			width: 24px;
			height: 24px;
			background: url(img/ico.png) no-repeat;
		}

		#menu li em.cur {
			background-position: 0 0;
		}

		#menu li em.copy {
			background-position: 0 -24px;
		}

		#menu li em.paste {
			background-position: 0 -48px;
		}
        .show{
            display: block;
        }
		.hide{
			display: none;
		}
	</style>
	<script type="text/javascript">
		window.onload = function () {

			var menu = document.getElementById("menu");
            document.oncontextmenu = function (evt) {
			var e = evt || event;
			var offX = e.offsetX,
				offY = e.offsetY;
				console.log(offX,offY);
            e.preventDefault ? e.preventDefault() : e.returnValue = false; // 阻止默认事件 ,IE不支持，使用returnValue = false
			menu.className = "show";
			// menu.style.display = "block";
			menu.style.left = offX +"px";
			menu.style.top = offY+"px";
			

           document.onclick =  function () {
			menu.className = "hide";
    }

		}
	}
	</script>
</head>

<body>
	<center>自定义右键菜单，请在页面点击右键查看效果。</center>
	<ul id="menu" class="hide" >
		<li class="">
			<em class="cut"></em>
			<a href="javascript:;">剪切</a>
		</li>
		<li class="">
			<em class="copy"></em>
			<a href="javascript:;">复制</a>
		</li>
		<li class="">
			<em class="paste"></em>
			<a href="javascript:;">粘贴</a>
		</li>
	</ul>

</body>

</html>
